<template>
  <div class="page-container">
    <SelectTrigger label="折线的类型" :options="options" width="400px"/>
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";

const options = ref([]); // 选项

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    selectionIndicator: false, //
    shadows: true,
    shouldAnimate: true,
  });

  const polylines = new Cesium.PolylineCollection(); // 创建一个折线集合
  viewer.scene.primitives.add(polylines);

  options.value = [
    {
      text: "添加基本折线",
      onselect: function () {
        polylines.removeAll();
        const polyline = polylines.add({
          positions: Cesium.PolylinePipeline.generateCartesianArc({
            positions: Cesium.Cartesian3.fromDegreesArray([
              -120.0, 40.0, -110.0, 30.0,
            ]),
          }),
          material: Cesium.Material.fromType("Color", {
            // color: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
            color: Cesium.Color.RED,
          }),
        });
      },
    },
    {
      text: "添加有边框的折线",
      onselect: function () {
        polylines.removeAll();
        const widePolyline = polylines.add({
          positions: Cesium.PolylinePipeline.generateCartesianArc({
            positions: Cesium.Cartesian3.fromDegreesArray([
              -105.0, 40.0, -100.0, 38.0, -105.0, 35.0, -100.0, 32.0,
            ]),
          }),
          // 使用轮廓线
          material: Cesium.Material.fromType(
            Cesium.Material.PolylineOutlineType,
            {
              outlineWidth: 5.0,
              outlineColor: Cesium.Color.YELLOW,
              color: Cesium.Color.GREEN,
            }
          ),
          width: 10.0,
        });
      },
    },
    {
      text: "添加发光锥形线",
      onselect: function () {
        polylines.removeAll();
        const coloredPolyline = polylines.add({
          positions: Cesium.PolylinePipeline.generateCartesianArc({
            positions: Cesium.Cartesian3.fromDegreesArray([
              -95.0, 30.0, -85.0, 40.0,
            ]),
          }),
          material: Cesium.Material.fromType(Cesium.Material.PolylineGlowType, {
            glowPower: 0.2, // 发光强度，占总线宽的百分比（小于 1.0）。
            taperPower: 0.2, // 锥化效果的强度，以线条总长度的百分比表示。如果值为 1.0 或更高，则不使用锥化效果。
            color: new Cesium.Color(1.0, 0.5, 0.0, 1.0), // 线上光晕的颜色和最大 alpha 值。
          }),
          width: 10.0,
        });
      },
    },
    {
      text: "折线起点终点连接起来",
      onselect: function () {
        polylines.removeAll();
        // A polyline loop
        const loopPolyline = polylines.add({
          // 地球表面是一个弧线， 点坐标转弧线
          positions: Cesium.PolylinePipeline.generateCartesianArc({
            positions: Cesium.Cartesian3.fromDegreesArray([
              -105.0, 30.0, -105.0, 25.0, -100.0, 22.0, -100.0, 28.0,
            ]),
          }),
          width: 3.0,
          loop: true, // 是否连接起点终点
        });
      },
    },
    {
      text: "箭头线",
      onselect: function () {
        polylines.removeAll();
        const localPolylines = viewer.scene.primitives.add(
          new Cesium.PolylineCollection()
        );
        const center = Cesium.Cartesian3.fromDegrees(-80.0, 35.0);
        localPolylines.modelMatrix =
          Cesium.Transforms.eastNorthUpToFixedFrame(center);
        const localPolyline = localPolylines.add({
          positions: [
            new Cesium.Cartesian3(0.0, 0.0, 0.0),
            new Cesium.Cartesian3(1000000.0, 0.0, 0.0),
          ],
          width: 10.0,
          material: Cesium.Material.fromType(Cesium.Material.PolylineArrowType),
        });
      },
    },
    {
      text: "渐变线",
      onselect: function () {
        polylines.removeAll();
        const fadingPolyline = polylines.add({
          positions: Cesium.PolylinePipeline.generateCartesianArc({
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
              -75, 43, 500000, -125, 43, 500000,
            ]),
          }),
          width: 5,
          material: Cesium.Material.fromType(Cesium.Material.FadeType, {
            repeat: false,
            fadeInColor: Cesium.Color.CYAN,
            fadeOutColor: Cesium.Color.CYAN.withAlpha(0),
            time: new Cesium.Cartesian2(0.0, 0.0),
            fadeDirection: {
              x: true,
              y: false,
            },
          }),
        });
      },
    },
    {
      text: "横向线（每个位置与经纬线成的角度一样）",
      onselect: function () {
        polylines.removeAll();
        const rhumbLine = polylines.add({
          positions: Cesium.PolylinePipeline.generateCartesianRhumbArc({
            positions: Cesium.Cartesian3.fromDegreesArray([
              -130.0, 30.0, -75.0, 30.0,
            ]),
          }),
          width: 5,
          material: Cesium.Material.fromType("Color", {
            color: new Cesium.Color(0.0, 1.0, 0.0, 1.0),
          }),
        });
      },
    },
  ];
});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
